<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线OJ-题目列表</title>
    <style>
        /* 起手式, 100%保证我们的样式设置可以不受默认影响 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding-bottom: 70px; /* 为 footer 留出空间 */
        }

        .navbar {
            width: 100%;
            height: 50px;
            background-color: #333;
            overflow: hidden;
            border-radius: 8px 8px 0 0;
        }

        .navbar a {
            display: inline-block;
            width: 80px;
            color: white;
            font-size: large;
            line-height: 50px;
            text-decoration: none;
            text-align: center;
            transition: background-color 0.3s;
        }

        .navbar a:hover {
            background-color: #555;
        }

        .navbar .login {
            float: right;
        }

        .question_list {
            padding-top: 20px;
            text-align: center;
        }

        .question_list h1 {
            color: #4CAF50;
            margin-bottom: 20px;
        }

        .search_box {
            margin-bottom: 20px;
        }

        .search_box input {
            padding: 10px;
            width: 60%;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .search_box button {
            padding: 10px 15px;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search_box button:hover {
            background-color: #45a049;
        }

        .table-container {
            max-height: 400px; /* 固定高度 */
            overflow-y: auto; /* 允许垂直滚动 */
            margin-top: 20px;
        }

        table {
            width: 100%;
            font-size: large;
            border-collapse: collapse;
            background-color: #f9f9f9;
        }

        th, td {
            padding: 12px;
            text-align: center;
            border: 1px solid #ddd;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        td a {
            text-decoration: none;
            color: #333;
        }

        td a:hover {
            color: #4CAF50;
            text-decoration: underline;
        }

        .footer {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #777;
            position: absolute;
            bottom: 0; /* 固定在底部 */
            left: 0;
        }

        .pagination {
            margin-top: 20px;
        }

        .pagination button {
            padding: 5px 10px;
            margin: 0 5px;
            border: 1px solid #4CAF50;
            background-color: white;
            color: #4CAF50;
            cursor: pointer;
            border-radius: 4px;
        }

        .pagination button:hover {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="navbar">
            <a href="index.html">首页</a>
            <a href="/all_questions">题库</a>
            <a class="login" href="login.html">登录</a>
        </div>
        <div class="question_list">
            <h1>OnlineJuge题目列表</h1>
            <div class="search_box">
                <input type="text" placeholder="请输入题目标题" id="search_input">
                <button onclick="search()">搜索</button>
            </div>
            <div class="table-container">
                <table id="questionTable">
                    <tr>
                        <th class="item">编号</th>
                        <th class="item">标题</th>
                        <th class="item">难度</th>
                    </tr>
                    {{#question_list}}
                    <tr>
                        <td class="item">{{number}}</td>
                        <td class="item"><a href="/one_question/{{number}}">{{title}}</a></td>
                        <td class="item">{{star}}</td>
                    </tr>
                    {{/question_list}}
                </table>
            </div>
            <div class="pagination">
                <button id="prevPage" onclick="changePage(-1)">上一页</button>
                <button id="nextPage" onclick="changePage(1)">下一页</button>
            </div>
        </div>
    </div>
    <div class="footer">
        <hr>
        <h4>@trc</h4>
    </div>
</body>
<script>
    let currentPage = 1;
    const itemsPerPage = 10;
    let allQuestions = []; // 存储所有题目

    // 获取题目列表
    function getQuestions() {
        const rows = document.querySelectorAll("#questionTable tr");
        for (let i = 1; i < rows.length; i++) {
            const number = rows[i].cells[0].innerText;
            const title = rows[i].cells[1].innerText;
            const star = rows[i].cells[2].innerText;
            allQuestions.push({ number: parseInt(number), title, star });
        }
        renderTable();
    }

    function renderTable() {
        const table = document.getElementById("questionTable");
        const rows = table.getElementsByTagName("tr");
        const totalRows = allQuestions.length; // 使用 allQuestions 的长度
        const totalPages = Math.ceil(totalRows / itemsPerPage);

        // 隐藏所有行
        for (let i = 1; i < rows.length; i++) {
            rows[i].style.display = 'none';
        }

        // 计算当前页的起始和结束行
        const start = (currentPage - 1) * itemsPerPage; // 从0开始
        const end = Math.min(start + itemsPerPage, totalRows);

        // 显示当前页的行
        for (let i = start; i < end; i++) {
            const question = allQuestions[i];
            const row = table.insertRow(i + 1); // +1 是因为我们从1开始
            row.innerHTML = `
                <td class="item">${question.number}</td>
                <td class="item"><a href="/one_question/${question.number}">${question.title}</a></td>
                <td class="item">${question.star}</td>
            `;
        }

        // 更新按钮状态
        document.getElementById("prevPage").disabled = currentPage === 1;
        document.getElementById("nextPage").disabled = currentPage === totalPages;
    }

    function changePage(direction) {
        currentPage += direction;
        renderTable();
    }

    function search() {
        const search_input = document.getElementById("search_input").value.toLowerCase();
        const filteredQuestions = allQuestions.filter(question => 
            question.title.toLowerCase().includes(search_input) // 根据标题搜索
        );

        // 更新表格内容
        const table = document.getElementById("questionTable");
        const rows = table.getElementsByTagName("tr");
        // 清空表格
        while (table.rows.length > 1) {
            table.deleteRow(1);
        }

        // 渲染过滤后的结果
        filteredQuestions.forEach(question => {
            const row = table.insertRow();
            row.innerHTML = `
                <td class="item">${question.number}</td>
                <td class="item"><a href="/one_question/${question.number}">${question.title}</a></td>
                <td class="item">${question.star}</td>
            `;
        });

        // 如果没有结果，显示提示
        if (filteredQuestions.length === 0) {
            const row = table.insertRow();
            row.innerHTML = `<td class="item" colspan="3">没有找到题目</td>`;
        }
    }

    // 初始渲染
    getQuestions();
</script>
</html>